<template>
  <div class="house_type">

    <!-- 户型 -->
    <div class="FilterMore">
      <div class="FilterMore_title">户型</div>
      <div class="FilterMore_tagsBox">
        <span
          v-for="item in houseData.roomType"
          :key="item.label"
          @click="onCheck(item)"
          :class="{FilterMore_tagActive:item.isCheck,FilterMore_tag:true}"
        >
        {{item.label}}
        </span>
      </div>
    </div>

    <!-- 朝向 -->
    <div class="FilterMore">
      <div class="FilterMore_title">朝向</div>
      <div class="FilterMore_tagsBox">
        <span
          v-for="item in houseData.oriented"
          :key="item.label"
          class="FilterMore_tag"
          @click="onCheck(item)"
          :class="{FilterMore_tagActive:item.isCheck,FilterMore_tag:true}"
        >
        {{item.label}}
        </span>
      </div>
    </div>

    <!-- 楼层 -->
    <div class="FilterMore">
      <div class="FilterMore_title">楼层</div>
      <div class="FilterMore_tagsBox">
        <span
          v-for="item in houseData.floor"
          :key="item.label"
          class="FilterMore_tag"
          @click="onCheck(item)"
          :class="{FilterMore_tagActive:item.isCheck,FilterMore_tag:true}"
        >
        {{item.label}}
        </span>
      </div>
    </div>

    <!-- 房屋亮点 -->
    <div class="FilterMore">
      <div class="FilterMore_title">房屋亮点</div>
      <div class="FilterMore_tagsBox">
        <span
          v-for="item in houseData.characteristic"
          :key="item.label"
          class="FilterMore_tag"
          @click="onCheck(item)"
          :class="{FilterMore_tagActive:item.isCheck,FilterMore_tag:true}"
        >
        {{item.label}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HouseType',
  data () {
    return {

    }
  },
  props: {
    houseData: {
      type: Object,
      required: true
    }
  },
  created () {

  },

  methods: {
    onCheck (item) {
      this.$forceUpdate()
      this.$set(item, 'isCheck', !item.isCheck)
    },
    // 清除筛选中的选择
    onReset () {
      for (const key in this.houseData) {
        this.houseData[key].forEach(item => (this.$set(item, 'isCheck', false)))
      }
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped lang='less'>
.house_type{
  padding: 0 15px 60px 15px;
  overflow-y: scroll;
  .FilterMore{
    font-family: "Microsoft YaHei";
    color: #333;

    // 标题样式
    .FilterMore_title{
      margin: 20px 0;
      font-size: 15px;
    }

    // 选择标签整体样式
    .FilterMore_tagsBox{
      margin-left: 40px;
      border-bottom: 1px solid #e5e5e5;
      padding-bottom: 14px;

      // 标签样式
      .FilterMore_tag{
        display: inline-block;
        height: 32px;
        width: 70px;
        margin: 0 18px 15px 0;
        border: 1px solid #ddd;
        border-radius: 3px;
        line-height: 32px;
        text-align: center;
        font-size: 12px;
        color: #888;
      }

      // 点击后的标签样式
      .FilterMore_tagActive{
        border: 1px solid #21b97a;
        color: #21b97a;
        background-color: #defaef;
      }
    }
  }
}
</style>
